<template>
  <div class="declare">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left" @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">健康申报表</span>
      <span class="header-wrap-right"></span>
    </div>
    <div class="declare-content">
      <div class="objbox">
        <div style="color: red;margin: .3rem;">请认真填写您的真实信息，切勿乱填写,否则后果自行承担！</div>
        <!-- 出发时间 -->
        <div class="declare-content">
          <div class="declare-list" @click='showpPicker' v-if="time">
            <span>{{ time }}</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="declare-list" @click='showpPicker' v-else>
            <span>请选择出发时间</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
        </div>
        <!-- 选择省市区 -->
        <div class="declare-content">
          <div class="declare-list" @click='againCity' v-if="address">
            <span>{{ address }}</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="declare-list" @click='againCity' v-else>
            <span>请选择出发地址</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
        </div>
        <div class="declare-list">
          <van-field clearable v-model="postList.depart_address" placeholder="请输入出发地址详细信息"/>
        </div>


        <div class="declare-content">
          <div class="declare-list" @click='againCity1' v-if="address1">
            <span>{{ address1 }}</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="declare-list" @click='againCity1' v-else>
            <span>请选择现居地址</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
        </div>
        <div class="declare-content">
          <div class="declare-list">
            <van-field clearable v-model="postList.live_address" placeholder="请输入现居地址详细信息"/>
          </div>
        </div>

        <div class="declare-list">
          <van-field clearable v-model="postList.name" placeholder="请输入姓名"/>
        </div>
        <div class="declare-content">
          <div class="declare-list">
            <van-field clearable v-model="postList.idCard" placeholder="请输入身份证"/>
          </div>
        </div>
        <div class="declare-content">
          <div class="declare-list">
            <van-field type="number" clearable v-model="postList.mobile" placeholder="请输入手机号"/>
          </div>
        </div>
        <div class="declare-content">
          <div class="declare-list">
            <van-field type="number" clearable v-model="postList.age" placeholder="请输入年龄"/>
          </div>
        </div>
        <!-- 备注 -->
        <div class="declare-content">
          <div class="declare-list">
            <van-field clearable v-model="postList.remark" placeholder="请输入备注"/>
          </div>
        </div>
        <van-radio-group v-model="postList.ways">
          <div style="font-weight:bold;height:.5rem;line-height:.5rem;text-align:center;">交通方式</div>
          <van-cell-group>
            <van-cell title="汽车" clickable @click="postList.ways = '1'">
              <van-radio slot="right-icon" name="1"/>
            </van-cell>
            <van-cell title="火车" clickable @click="postList.ways = '2'">
              <van-radio slot="right-icon" name="2"/>
            </van-cell>
            <van-cell title="飞机" clickable @click="postList.ways = '3'">
              <van-radio slot="right-icon" name="3"/>
            </van-cell>
            <van-cell title="自驾" clickable @click="postList.ways = '4'">
              <van-radio slot="right-icon" name="4"/>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <van-radio-group v-model="postList.sex">
          <div style="font-weight:bold;height:.5rem;line-height:.5rem;text-align:center;">性别</div>
          <van-cell-group>
            <van-cell title="男" clickable @click="postList.sex = '1'">
              <van-radio slot="right-icon" name="1"/>
            </van-cell>
            <van-cell title="女" clickable @click="postList.sex = '2'">
              <van-radio slot="right-icon" name="2"/>
            </van-cell>
          </van-cell-group>
        </van-radio-group>

        <van-radio-group v-model="postList.symptom">
          <div style="font-weight:bold;height:.5rem;line-height:.5rem;text-align:center;">是否有发热、咳嗽、发力、胸闷等症状）</div>
          <van-cell-group>
            <van-cell title="否" clickable @click="postList.symptom = '0'">
              <van-radio slot="right-icon" name="0"/>
            </van-cell>
            <van-cell title="是" clickable @click="postList.symptom = '1'">
              <van-radio slot="right-icon" name="1"/>
            </van-cell>
          </van-cell-group>
        </van-radio-group>

        <van-radio-group v-model="postList.similar">
          <div style="font-weight:bold;height:.5rem;line-height:.5rem;text-align:center;">过去是否被诊断为肺炎确诊病例或疑似病例</div>
          <van-cell-group>
            <van-cell title="否" clickable @click="postList.similar = '0'">
              <van-radio slot="right-icon" name="0"/>
            </van-cell>
            <van-cell title="是" clickable @click="postList.similar = '1'">
              <van-radio slot="right-icon" name="1"/>
            </van-cell>
          </van-cell-group>
        </van-radio-group>

        <van-radio-group v-model="postList.touch">
          <div style="font-weight:bold;height:.5rem;line-height:.5rem;text-align:center;">是否与肺炎确诊病例或疑似病例有密切接触</div>
          <van-cell-group>
            <van-cell title="否" clickable @click="postList.touch = '0'">
              <van-radio slot="right-icon" name="0"/>
            </van-cell>
            <van-cell title="是" clickable @click="postList.touch = '1'">
              <van-radio slot="right-icon" name="1"/>
            </van-cell>
          </van-cell-group>
        </van-radio-group>


        <van-radio-group v-model="postList.red_touch" style="margin-bottom: .2rem;">
          <div style="font-weight:bold;height:auto;line-height:.4rem;text-align:center;word-wrap: break-word;word-break: normal;">过去14天是否与来自疫情重点地区人员有密切接触</div>
          <van-cell-group>
            <van-cell title="否" clickable @click="postList.red_touch = '0'">
              <van-radio slot="right-icon" name="0"/>
            </van-cell>
            <van-cell title="是" clickable @click="postList.red_touch = '1'">
              <van-radio slot="right-icon" name="1"/>
            </van-cell>
          </van-cell-group>
        </van-radio-group>

        <van-radio-group v-model="postList.red_area" style="margin-bottom: .2rem;">
          <div style="font-weight:bold;height:auto;line-height:.4rem;text-align:center;word-wrap: break-word;word-break: normal;">过去14天是否去过疫情重点地区</div>
          <van-cell-group>
            <van-cell title="否" clickable @click="postList.red_area = '0'">
              <van-radio slot="right-icon" name="0"/>
            </van-cell>
            <van-cell title="是" clickable @click="postList.red_area = '1'">
              <van-radio slot="right-icon" name="1"/>
            </van-cell>
          </van-cell-group>
        </van-radio-group>

        <van-radio-group v-model="postList.isolated" style="margin-bottom: .2rem;">
          <div style="font-weight:bold;height:auto;line-height:.4rem;text-align:center;word-wrap: break-word;word-break: normal;">是否被留验站集中隔离观察</div>
          <van-cell-group>
            <van-cell title="否" clickable @click="postList.isolated = '0'">
              <van-radio slot="right-icon" name="0"/>
            </van-cell>
            <van-cell title="是" clickable @click="postList.isolated = '1'">
              <van-radio slot="right-icon" name="1"/>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>

      <span style="display:block;margin: 0 0 .2rem .3rem;">核酸检测报告上传</span>
      <div class="uploader">
        <van-uploader v-model="postList.list" :max-count="8"/>
      </div>

      <!-- 确定 -->
      <div class="declare-content" style="margin: .7rem .3rem .5rem;">
        <div class="submit" @click="post">
          确定
        </div>
      </div>
    </div>
    <!-- 地址弹窗 -->
    <van-popup v-model="showpopup" position="bottom">
      <div v-show="flag">
        <van-area :area-list="areaList"
                  :visible-item-count=5
                  @confirm="onAddrConfirm"
                  @cancel="cancel"
                  :value="postList.addrCode"/>
      </div>
    </van-popup>
    <!-- 地址弹窗 -->
    <van-popup v-model="showpopup1" position="bottom">
      <div v-show="flag1">
        <van-area :area-list="areaList"
                  :visible-item-count=5
                  @confirm="onAddrConfirm1"
                  @cancel="cancel"
                  :value="postList.addrCode1"/>
      </div>
    </van-popup>

    <van-popup v-model="timePop" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        @cancel="cancel"
        @confirm="confirm"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>
<script>
import api from '../../api/api.js'
import {Uploader, Area, Popup, Picker, Dialog, DatetimePicker, Field, RadioGroup, Radio, Cell, CellGroup, CollapseItem, Collapse} from 'vant';

export default {
  data() {
    return {
      areaList: null,
      activeNames: [],
      currentDate: new Date(),
      timePop: false,
      address: '',
      address1: '',
      postList: {
        list: [],
        images: [],
        avatar: [],
        age: '',
        name: '',
        mobile: '',
        addrCode: '530103',
        addrCode1: '530103',
        idCard: '',
        sex: '1',
        ways: '1',
        symptom: '0',
        similar: '0',
        touch: '0',
        red_touch: '0',
        red_area: '0',
        isolated: '0',
        depart_address: '',
        live_address: '',
        remark: '',
        time1: ''
      },
      columns: [],
      flag: false,
      showpopup: false,
      flag1: false,
      showpopup1: false,
      ShowConfirm: false,
      address: '',
      address1: '',
      time: '',
    }
  },
  created() {
    this.getarea()
  },
  methods: {
    //上传
    upload() {
      this.$post(api.upload, {
        base64: this.postList.avatar
      })
        .then((response) => {
          if (response.data.code == 1) {
            this.postList.images = response.data.data.urls
            this.$post(api.postDeclare, {
              ...this.postList
            })
              .then((response) => {
                this.time = ""
                this.address = ""
                this.address1 = ""
                this.postList.live_address = ""
                this.postList.depart_address = ""
                this.postList.mobile = ""
                this.postList.list = []
                this.postList.name = ""
                this.postList.idCard = ""
                this.postList.age = ""
                this.postList.remark = ""
                this.postList.active = ""
                this.postList.images = ""
                this.$toast('提交成功')
              })
              .catch((error) => {
                console.log(error)
              });
          }
        })
    },
    showpPicker() {
      this.timePop = true
    },
    confirm(value) {
      var date = value
      this.time = date.getFullYear()
        + '-' + ((date.getMonth() + 1) <= 9 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1))
        + '-' + (date.getDate() <= 9 ? ('0' + date.getDate()) : date.getDate())
        + ' ' + (date.getHours() <= 9 ? ('0' + date.getHours()) : date.getHours())
        + ':' + (date.getMinutes() <= 9 ? ('0' + date.getMinutes()) : date.getMinutes());
      this.timePop = false
      var date1 = new Date(this.time);
      this.postList.time1 = date.getTime();
    },
    markopen(index) {
      console.log(index)
    },
    goback() {
      this.$router.go(-1)
    },
    // 删除人员列表
    delList(index) {
      this.postList.splice(index, 1)
    },
    // 获取省市区
    getarea() {
      this.$jsonp(api.source.areaNumberFull, {
        callbackName: 'jsonpCallback'
      })
        .then((response) => {
          this.areaList = response
        })
        .catch((error) => {
          console.log(error)
        });
    },
    // 点击选择按钮，省市区弹窗
    againCity() {
      this.showpopup = true
      this.flag = true
    },
    againCity1() {
      this.showpopup1 = true
      this.flag1 = true
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      }
      return value;
    },
    cancel() {
      this.timePop = false
      this.showpopup = false
      this.flag = false
      this.showpopup1 = false
      this.flag1 = false
      this.mark = false
      this.street = false
    },
    // 点击确认，获取所选的省市区数据，确定选择,返回的必定是三元素数组
    onAddrConfirm(value) {
      this.province = value[0].name
      this.city = value[1].name
      this.district = value[2].name
      this.postList.addrCode = value[2].code
      this.showpopup = false
      this.flag = false
      this.address = this.province + this.city + this.district
    },
    onAddrConfirm1(value) {
      this.province = value[0].name
      this.city = value[1].name
      this.district = value[2].name
      this.postList.addrCode1 = value[2].code
      this.showpopup1 = false
      this.flag1 = false
      this.address1 = this.province + this.city + this.district
    },
    post() {
      var reg = /^([1][0-9]{10})$/;
      var regPartton = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
      if (!this.time) {
        this.$toast('请选择出发时间')
        return
      }
      if (!this.address) {
        this.$toast('请选择出发地址')
        return
      }
      if (!this.postList.depart_address) {
        this.$toast('请输入出发地址详细信息')
        return
      }
      if (!this.address1) {
        this.$toast('请选择现居地址')
        return
      }
      if (!this.postList.live_address) {
        this.$toast('请输入现居地址详细信息')
        return
      }
      if (!this.postList.name) {
        this.$toast('请输入姓名')
        return
      }
      if (!this.postList.idCard) {
        this.$toast('请输入身份证')
        return
      }
      if (!regPartton.test(this.postList.idCard)) {
        this.$toast('身份证格式不正确')
        return
      }
      if (!this.postList.mobile) {
        this.$toast('请输入手机号')
        return
      }
      if (!reg.test(this.postList.mobile)) {
        this.$toast('手机格式不正确')
        return
      }
      if (!this.postList.age) {
        this.$toast('请输入年龄')
        return
      }
      if (this.postList.list == 0) {
        this.$toast('请上传核算检测图片')
        return
      }
      this.postList.list.map((element, index) => {
        // 创建Canvas对象(画布)
        let canvas = document.createElement('canvas')
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext('2d')
        // 创建新的图片对象
        let img = new Image()
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = element.content
        // 监听浏览器加载图片完成，然后进行进行绘制
        img.onload = () => {
          // 指定canvas画布大小，该大小为最后生成图片的大小
          canvas.width = 450
          canvas.height = 350
          /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
          如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
          context.drawImage(img, 0, 0, 450, 350)
          // 将绘制完成的图片重新转化为base64编码，element.file.type为图片类型，0.92为默认压缩质量
          element.content = canvas.toDataURL(element.file.type, 0.92)
          // 最后将base64编码的图片保存到数组中，留待上传。
          this.postList.avatar.push(element.content)
          this.upload()
        }
      })
    },

  },
  components: {
    [Area.name]: Area,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Uploader.name]: Uploader,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Dialog.Component.name]: Dialog.Component,
    [DatetimePicker.name]: DatetimePicker,
  }
}
</script>
<style>
.declare .declare-list .van-cell {
  background: none;
  color: #000;
  line-height: .55rem;
  padding: .24rem .3rem;
}

.declare .van-cell-group {
  margin: 0 .3rem;
}

.declare .van-cell-group {
  background: none;
}

.declare .van-uploader__upload {
  width: 1.2rem;
  height: 1.2rem;
  background-color: #fff;
  border-radius: 0.12rem;
  border: 1px solid #57c5c6;
}

.declare .van-uploader__preview-image {
  width: 1.2rem;
  height: 1.2rem;
}

.declare .van-uploader__preview, .van-uploader__upload {
  margin: 0 .25rem .2rem .3rem !important;
}

.declare .van-uploader__upload-icon {
  color: #000;
  font-size: .6rem;
}

.declare .van-icon-delete:before {
  content: "\F041";
}

</style>
<style scoped>
.van-dialog {
  width: 75%;
}

.declare-content {
  margin: .35rem 0;
  color: #000;
  font-weight: bold;
}

.declare-title {
  display: inline-block;
  margin-bottom: .2rem;
  font-size: .3rem;
  flex: 3;
  color: #FD5585;
}

.declare-list {
  margin: 0 .3rem;
  background: #fff;
  display: flex;
  /* width: 100%; */
  height: 1rem;
  line-height: 1rem;
  /* border-radius: .5rem; */
  border-bottom: 0.02rem solid #ddd;
}

.declare-list span:nth-of-type(1) {
  text-indent: .35rem;
  flex: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

.declare-list span:nth-of-type(2) {
  text-align: center;
  flex: 1;
}

.submit {
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}

.delPeople {
  width: 100%;
  height: auto;
  text-align: right;
}

.delPeople span {
  margin: .1rem;
  padding: .02rem .1rem;
  color: red;
  display: inline-block;
  border: 1px solid red;
  border-radius: .1rem;
}

.objbox {
  border: .02rem solid #ccc;
  margin: 1rem .3rem .2rem;
  border-radius: .1rem;
  overflow: hidden;
}

.titlePeoPle {
  font-size: .3rem;
  height: .7rem;
  line-height: 1rem;
  color: #1989fa;
  text-align: center;
}
</style>
